<template>
	<view class="swiper">
		<uni-swiper-dot :info="info" :current="current" field="content" :mode="mode" :dots-styles="dotsStyles">
			<swiper style="height: 350rpx;" class="swiper-box" @change="change" autoplay="true" interval="2000" duration="500">
				<swiper-item v-for="(item ,index) in info" :key="index">
					<view class="swiper-item">
						<image :src="item.imgUrl" mode="widthFix"></image>
					</view>
				</swiper-item>
			</swiper>
		</uni-swiper-dot>
	</view>
</template>

<script setup>
import { ref } from "vue";
import { onShow } from "@dcloudio/uni-app";
const props = defineProps({
	info: {
		type: Array,
		default: () => []
	}
});

onShow(() => {
	console.log(props.info);
});

const current = ref(0);
const mode = ref("round");
const dotsStyles = ref({
	backgroundColor: 'rgba(255, 90, 95,0.3)',
	border: '1px rgba(255, 90, 95,0.3) solid',
	color: '#fff',
	selectedBackgroundColor: 'rgba(255, 90, 95,0.9)',
	selectedBorder: '1px rgba(255, 90, 95,0.9) solid'
});

const change = (e) => {
	current.value = e.detail.current;
}
</script>

<style lang="scss" scoped>
@import '../static/css/public.scss';

.swiper-item {
	image {
		@include wh(100%, 100%);
	}
}
</style>
